<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>员工业绩</title>
    <link type="text/css" rel="stylesheet" href="fontsawesome/css/font-awesome.css"/>
    <link type="text/css" rel="stylesheet" href="css/datepicker.css"/>
    <link type="text/css" rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div class="main_box">
    <form action="${pageContext.request.contextPath}/findstaff_TC" method="post" id="record_form">
        <div class="search_box clearfix" style="padding-top:20px;">
            <div class="staff_info clearfix">
                <label>当前员工：</label>
                <span class="f_left">${staff.s_name}</span>
                <label>总提成：</label>
                <span class="f_left"><cite>${tc}</cite>元</span>
            </div>

            <label class="f_left">开始日期：</label>
            <div class="date_box">
                <input type="text" name="start" id="start_date" readonly/>
                <i class="fa fa-calendar"></i>
            </div>
            <label class="f_left">结束日期：</label>
            <div class="date_box">
                <input type="text" name="end" id="end_date" readonly/>
                <i class="fa fa-calendar"></i>
            </div>
            <div class="date_box">
                <input type="hidden" name="staff_id" value="${staff.staff_id}" />
<%--                <i class="fa fa-calendar"></i>--%>
            </div>
            <input type="submit" value="搜索" class="btn blue_btn submit"/>

        </div>
    </form>

    <div class="cont_box">
        <ul class="tab_tit clearfix">
            <li>施工业绩</li>
            <li>销售业绩</li>
            <li>储值卡业绩</li>
            <li>年卡业绩</li>
        </ul>
        <dl class="tab_conbox">
            <!--施工业绩-->
            <dd>
                <div class="achiev">施工总提成：<span>${tc2}</span><input type="button" value="导出员工业绩" onclick="exportExcel('tableExcel')" class="btn btn_info"/></div>
                <table border="0" cellspacing="0" cellpadding="0" class="table" id="tableExcel">
                    <thead>
                    <tr>
                        <th>订单号</th>
                        <th>服务项目</th>
                        <th>提成</th>
                        <th>服务收费</th>
                        <th>会员</th>
                        <th>支付方式</th>
                        <th>时间</th>
                    </tr>
                    </thead>
                    <tbody>
                    <c:forEach items="${allService2}" var="allService2">
                    <tr>
                        <td>${allService2.o_number}</td>
                        <td>${allService2.serv}</td>
                        <td>${allService2.service_tc}</td>
                        <td>${allService2.ac_price}</td>
                        <td>${allService2.phone}</td>
                        <td>${allService2.mode}</td>
                        <td>${allService2.d_time}</td>
                    </tr>
                    </c:forEach>
                    </tbody>
                </table>
            </dd>
            <!--销售业绩-->
            <dd>
                <div class="achiev">销售总提成：<span>${tc1}</span><input type="button" value="导出员工业绩" onclick="exportExcel('table_box')" class="btn btn_info"/></div>
                <table border="0" cellspacing="0" cellpadding="0" class="table" id="table_box">
                    <thead>
                    <tr>
                        <th>订单号</th>
                        <th>服务项目</th>
                        <th>提成</th>
                        <th>服务收费</th>
                        <th>时间</th>
                    </tr>
                    </thead>
                    <tbody>
                    <c:forEach items="${allProduct1}" var="allProduct1">
                    <tr>
                        <td>${allProduct1.o_number}</td>
                        <td>${allProduct1.pname}</td>
                        <td>${allProduct1.sales}</td>
                        <td>${allProduct1.a_price}</td>
                        <td><fmt:formatDate value="${allProduct1.ptime}"/></td>
                    </tr>
                    </c:forEach>
                    </tbody>
                </table>
            </dd>
            <!--储值卡业绩-->
            <dd>
                <div class="achiev">储值卡总提成：<span>${tc3}</span><input type="button" value="导出员工业绩" onclick="exportExcel('tableExcel1')" class="btn btn_info"/></div>
                <table border="0" cellspacing="0" cellpadding="0" class="table" id="tableExcel1">
                    <thead>
                    <tr>
                        <th>会员</th>
                        <th>卡种</th>
                        <th>充值类型</th>
                        <th>提成</th>
                        <th>卡价值</th>
                        <th>时间</th>
                    </tr>
                    </thead>
                    <tbody>

                    <c:forEach items="${allCard3}" var="allCard3">
                    <tr>
                        <td>${allCard3.phone}</td>
                        <td>${allCard3.clamps}</td>
                        <td>${allCard3.mode}</td>
                        <td>${allCard3.card_tc}</td>
                        <td>${allCard3.money}</td>
                        <td><fmt:formatDate value="${allCard3.cTime}"/></td>
                    </tr>
                    </c:forEach>
                    </tbody>
                </table>
            </dd>
            <!--年卡业绩-->
            <dd>
                <div class="achiev">年卡总提成：<span>${tc4}</span><input type="button" value="导出员工业绩" onclick="exportExcel('tableExcel2')" class="btn btn_info"/></div>
                <table border="0" cellspacing="0" cellpadding="0" class="table" id="tableExcel2">
                    <thead>
                    <tr>
                        <th>会员</th>
                        <th>提成</th>
                        <th>充值数量</th>
                        <th>时间</th>
                    </tr>
                    </thead>
                    <tbody>
                <c:forEach items="${allNewscard4}" var="allNewscard4">

                    <tr>
                        <td>${allNewscard4.phone}</td>
                        <td>${allNewscard4.card_tc}</td>
                        <td>${allNewscard4.money}</td>
                        <td><fmt:formatDate value="${allNewscard4.cTime}"/></td>
                    </tr>

                </c:forEach>
                    </tbody>
                </table>
            </dd>
        </dl>
    </div>
</div>
<!--javascript include-->
<script src="js/jquery-2.2.1.min.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/other.js"></script>
<script>
    $(function(){
        $.jqtab(".tab_tit",".tab_conbox","click");
        // $(".submit").click(function(){
        //     $.ajax({
        //         type:"post",
        //         url:"search_Staff.jsp",
        //         data:{},
        //         success:function(data){
        //             $(".tab_conbox").remove();
        //             $(".cont_box").append(data);
        //             $.jqtab(".tab_tit",".tab_conbox","click");
        //
        //         },
        //         error:function(data){
        //             alert(data);
        //         }
        //     });
        // });
    });
    var idTmr;
    //获取当前浏览器类型
    function getExplorer() {
        var explorer = window.navigator.userAgent ;
        //ie
        if (explorer.indexOf("MSIE") >= 0) {
            return 'ie';
        }
        //firefox
        else if (explorer.indexOf("Firefox") >= 0) {
            return 'Firefox';
        }
        //Chrome
        else if(explorer.indexOf("Chrome") >= 0){
            return 'Chrome';
        }
        //Opera
        else if(explorer.indexOf("Opera") >= 0){
            return 'Opera';
        }
        //Safari
        else if(explorer.indexOf("Safari") >= 0){
            return 'Safari';
        }
    }

    //获取到类型需要判断当前浏览器需要调用的方法，目前项目中火狐，谷歌，360没有问题
    //win10自带的IE无法导出
    function exportExcel(tableid) {
        if(getExplorer()=='ie')
        {
            var curTbl = document.getElementById(tableid);
            var oXL = new ActiveXObject("Excel.Application");
            var oWB = oXL.Workbooks.Add();
            var xlsheet = oWB.Worksheets(1);
            var sel = document.body.createTextRange();
            sel.moveToElementText(curTbl);
            sel.select();
            sel.execCommand("Copy");
            xlsheet.Paste();
            oXL.Visible = true;

            try {
                var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
            } catch (e) {
                print("Nested catch caught " + e);
            } finally {
                oWB.SaveAs(fname);
                oWB.Close(savechanges = false);
                oXL.Quit();
                oXL = null;
                idTmr = window.setInterval("Cleanup();", 1);
            }

        }
        else
        {
            tableToExcel(tableid)
        }
    }
    function Cleanup() {
        window.clearInterval(idTmr);
        CollectGarbage();
    }

    //判断浏览器后调用的方法，把table的id传入即可
    var tableToExcel = (function() {
        var uri = 'data:application/vnd.ms-excel;base64,',
            template = '<html><head><meta charset="UTF-8"></head><body><table>{table}</table></body></html>',
            base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) },
            format = function(s, c) {
                return s.replace(/{(\w+)}/g,
                    function(m, p) { return c[p]; }) }
        return function(table, name) {
            if (!table.nodeType) table = document.getElementById(table)
            var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
            window.location.href = uri + base64(format(template, ctx))
        }
    })()
</script>
</body>
</html>
